<!-- 模块说明 -->
<template>
  <div>
    <div class="top">
      <router-view />
    </div>
    <div class="bottom" v-if="!isRoute">
      <van-tabbar router v-model="active" active-color="#d3ab6d">
        <van-tabbar-item name="home" to="/home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item name="search" to="/friend" icon="friends-o">书友</van-tabbar-item>
        <van-tabbar-item name="friends" to="/sell" icon="add">卖书</van-tabbar-item>
        <van-tabbar-item name="setting" to="/news" icon="chat-o">消息</van-tabbar-item>
        <van-tabbar-item name="setting2" to="/me" icon="contact">我的</van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- <van-tabbar route >
  <van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
</van-tabbar> -->
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute()
const active = ref('home');
const isRoute = computed(() => route.meta.isHidden)
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .top {
    flex: 1;
    // background: pink;
  }

  .bottom {
    height: 8vh;
    // background: red;
  }
}
</style>
